<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 
-->
		<div id="app">
			<!--在文本框上按回车可以查找-->
			<input type="text" v-model="keywords" @keyup.enter="onEnterKeyUp()" />
			<!--点击按钮可以查找-->
			<button @click="onSearch">搜索</button>
			<div>查找的关键字：{{keywords}}</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						keywords: "macbook i5",
					}
				},
				methods: {
					onSearch() {
						console.log(`查找 ${this.keywords} 相关的内容...`);
					},
					onEnterKeyUp() {
						console.log(`触发了回车键...`);
						//调用对应的函数
						this.onSearch();
					},
				},
				//想变量keywords只要被更改，就重新执行一次搜索
				watch: {
					keywords() {
						console.log("自动调用一次watch中的keywords函数...");
						this.onSearch();
					},
				},
				//进入new Vue()中的一切data:{}, methods:{}, watch:{}都会被打散，最终都直接隶属于new VUe()对象，都是平级的，所以可以this.方式，互访。
			}).mount("#app");
		</script>
	</body>

</html>